<template>
  <div>
    <span class="search-condition-item-label"
          :title="attr.title">{{ attr.title ? attr.title : '' }}</span>
    <div class="search-condition-item-widget">
      <a-input v-model="text"
               :placeholder="attr.placeholder"
               :disabled="attr.disabled"
               @pressEnter="onEnter"
               @blur="onBlur" />
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      attr: {
        type: Object,
        default: {
          title: '',
          placeholder: '请输入'
        }
      },
      value: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        text: this.value
      };
    },
    created() {
      // this.oldValue = this.value;
    },
    watch: {
      value(newVal, oldVal) {
        this.text = newVal;
      }
    },
    methods: {
      // onValueChange(e) {
      //   this.$emit('valueChange', { key: this.attr.key, value: this.text ? this.text : null }, false);
      // },
      // onFocus() {
      //   this.oldValue = this.text;
      // },
      onBlur(e) {
        console.log(e);
        if (this.text != this.value) {
          this.$emit('valueChange', { key: this.attr.key, value: this.text ? this.text : null });
        }
      },
      onEnter(e) {
        if (this.text != this.value) {
          this.$emit('valueChange', { key: this.attr.key, value: this.text ? this.text : null });
        }
      }
    }
  };
</script>

<style scoped>
  .search-condition-item-widget {
    display: flex;
  }
</style>
